<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #px1 {
            font-size: 16px;
            line-height: 2em;
        }

        #px2 {
            font-size: 30px;
            border: 1px solid black;
        }

        #em1 {
            font-size: 0.5em;
        }

        #indent {
            font-size: 20px;
            text-indent: 2em;
        }

        #rem1 {
            font-size: 30px;
            border: 1px solid black;
        }

        #rem2 {
            font-size: 0.5rem;
        }

        #father {
            width: 80%;
            font-size: 30px;
            border: 1px solid black;
        }

        #son {
            width: 50%;
            font-size: 80%;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<p id="px1">These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div id="px2">The font-size of the div element is set to 30px.
    <span id="em1">The span element inside the div element has a font-size of 0.5em,
									which equals to 0.5x30 = 15px</span>
</div>
<p id="indent">首行缩进2字符长度，与字体实际尺寸无关<br/>首行缩进2字符</p>
<div id="rem1">The font-size of div is 30px.
    <span id="rem2">The span font-size is 16px*0.5=8px</span>
</div>
<br>
<div id="father">Father
    <div id="son">Son</div>
</div>
</body>
</html>